<template>
  <div class="voice-container">
    <div class="voice-content">
      <div v-for="pojo in pojos" :key="pojo.name">
        <span @click="selectOne(pojo)">
          <img :src="pojo.url">
        </span>
        <div class="voice-title">{{pojo.style}}</div>
      </div>
    </div>

    <div class="voice-btn">
      <span @click="$emit('close')">取消</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    pojos: Array
  },
  methods: {
    confirm () {},
    selectOne (pojo) {
      this.$emit('confirm', pojo)
    }
  }
}
</script>
<style lang="less" scoped rel="stylesheet/less">
  .voice-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: #F6F9FE;
    overflow-y: scroll;
  }

  .voice-content {
    padding-bottom: 60px;
  }

  .voice-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    z-index: 100;

    > span {
      flex: 1;
      padding: 15px;
      text-align: center;
      color: #fff;
      background: linear-gradient(to bottom, #8ba3fa, #7ec0f7)
    }
  }

  .voice-content {
    display: flex;
    flex-wrap: wrap;

    > div {
      flex: 0 0 calc(100% / 3);
      padding-top: 35px;
      text-align: center;

      > span {
        display: inline-block;
        border-radius: 5px;
        overflow: hidden;

        > img {
          width: 53px;
          height: 58px;
          display: block;
        }

        > span {
          width: 100%;
          padding: 1px;
          text-align: center;
          display: inline-block;
          font-size: 10px;
          color: #fff;
          background: linear-gradient(to top, #faa191 , #fcc467); /* 标准的语法 */;
        }
      }
    }
  }

  .voice-title {
    padding: 3px 0;
    text-align: center;
    font-size: 12px;
  }
</style>
